<template>
    <div class="background">
        <div class="common-layout">
            <el-container>
                <el-header class="header_background">
                    <div style="position: absolute; top: 0.1%; left: 2%;">
                        <img alt="" src="@/assets/logo1.png" style="width: 40px;">
                    </div>
                    <div style="position: absolute; top: 1.5%; left: 38%;">
                        <span style="font-size: 15px; font-weight: bold; color: whitesmoke">
                          您好！用户&nbsp;&nbsp;{{ username }}&nbsp;&nbsp;欢迎进入房屋租赁平台！
                        </span>
                    </div>
                    <div class="right-info">
                      <el-button @click="SignOut" style="margin-right: 10px;">
                        <el-icon :size="18" style="margin-right: 5px;">
                          <avatar />
                        </el-icon>
                        退出登录
                      </el-button>
                    </div>
                </el-header>
                <el-header class="sub_header_background">
                  <el-menu
                    :default-active="activeIndex"
                    router
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="whitesmoke"
                    active-text-color="white"
                    style="height: 102%;"
                    unique-opened
                  >
                    <el-menu-item index="/TenantHome">首页</el-menu-item>
                    <el-menu-item index="/TenantFavorite">我的收藏</el-menu-item>
                    <el-sub-menu index="transaction">
                      <template #title>交易管理</template>
                      <el-menu-item index="/TenantApplication">我的申请</el-menu-item>
                      <el-menu-item index="/TenantRecord">交易记录</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/SelectHouse">查看房源</el-menu-item>
                    <el-menu-item index="/VectorDatabase">向量数据库</el-menu-item>
                    <el-menu-item index="/PersonalAssistant">RAG问答助手</el-menu-item>
                    <el-menu-item index="/GraphRAGAssistant">GraphRAG问答助手</el-menu-item>
                    <el-menu-item index="/TenantSelfInfo">个人信息</el-menu-item>
                  </el-menu>
                </el-header>
                <el-main>
                    <div style="display: flex; font-weight: bold; font-family: Microsoft YaHei; font-size: 20px; margin-top: 0%;">
                      收藏列表
                      <div class="line" style="margin-left: 1.5%; margin-top: 1%;"></div>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                      <div v-if="total === 0" style="position: relative; left: 47.5%; margin-top: 8%;">
                          暂无数据
                      </div>
                      <el-card 
                        v-else 
                        v-for="item in displayData" 
                        :key="item.houseId"
                        shadow="hover" 
                        style="margin-top: 2%; margin-left: 5%; width: calc(90% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;"
                      >
                        <div class="common-layout">
                          <el-container>
                            <el-aside width="200px">
                              <el-image :src="item.imageUrl" fit="fill" style="width: 100%; height: 100%"></el-image>
                            </el-aside>
                            <el-container>
                              <el-header style="position: relative; padding-right: 80px;">
                                <router-link 
                                  :to="{ name: 'FavoriteHouseDisplay', query: { houseId: item.houseId } }" 
                                  style="font-family: Microsoft YaHei;"
                                >
                                  {{ item.title }}：{{ item.address }}
                                </router-link>
                                <el-tag
                                  :type="getStatusTagType(item.status)"
                                  effect="dark"
                                  size="medium" 
                                  style="width: auto; height: 30px; position: absolute; right: 0; top: 20%; transform: translateY(-40%); font-weight: bolder ; font-size: 14.5px; white-space: nowrap;"
                                  >
                                  {{ getStatusLabel(item.status) }}
                                </el-tag>
                              </el-header>
                              <el-main style="margin-top: -5%;">
                                &nbsp;&nbsp;&nbsp;&nbsp;{{ item.description }}
                              </el-main>
                            </el-container>
                          </el-container>
                        </div>
                      </el-card>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script src="@/assets/js/TenantFavorite.js"></script>

<style scoped>
.background {
  background-color: whitesmoke;
  min-height: 100vh;
}
.header_background {
  background-color: #1b4989;
  height: 6vh;
}
.sub_header_background {
  background-color: #545c64;
  min-height: 7vh;
}
.right-info {
  width: 100px;
  position: absolute;
  right: 2%;
  top: 0.7%
}

.right-info:hover {
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.line{ 
  background: url(https://www.upc.edu.cn/ximages/tit1.png) center repeat-x; 
  height: 0.4rem; 
  flex: 1; 
  background-size: auto;
  margin: 0.16rem;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
}
</style>